/* ------------------------------------------------------------------------------
*
*  # Chart styling
*
*  Charts base - container and sizing setup
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */

// Core
// ------------------------------

// Container
.chart-container {
  position: relative;
  width: 100%;

  // Add scroll
  &.has-scroll {
    overflow-x: scroll;
    overflow-y: visible;
    max-width: 100%;
  }

  // Add scroll for all charts on mobile to hide overflow
  @media (max-width: @screen-xs-max) {
    overflow-x: scroll;
    overflow-y: visible;
    max-width: 100%;
  }
}

// Chart itself
.chart {
  position: relative;
  display: block;
  width: 100%;
  direction: ltr;

  // Give chart min width
  &.has-minimum-width {
    min-width: 600px;
  }
}

// Give chart fixed height
.has-fixed-height {
  height: 400px;
}

// Pie charts
.chart-pie {
  width: 100%;
  height: 400px;
  min-width: 500px;
}
